<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<input class="search-input" placeholder="请输入小区或地址" />
			<view class="user-icon">🗺</view>
		</view>
		
		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item" @click="toggleDropdown('area')">
				<span>{{ selectedArea || '区域' }}</span>
				<span class="arrow" :class="{ 'rotate': dropdownVisible.area }">▼</span>
			</view>
			<view class="filter-item" @click="toggleDropdown('type')">
				<span>{{ selectedType || '方式' }}</span>
				<span class="arrow" :class="{ 'rotate': dropdownVisible.type }">▼</span>
			</view>
			<view class="filter-item" @click="toggleDropdown('price')">
				<span>{{ selectedPrice || '价格' }}</span>
				<span class="arrow" :class="{ 'rotate': dropdownVisible.price }">▼</span>
			</view>
			<view class="filter-item" @click="toggleDropdown('filter')">
				<span>筛选</span>
				<span class="arrow" :class="{ 'rotate': dropdownVisible.filter }">▼</span>
			</view>
		</view>
		
		<!-- 下拉内容 -->
		<view class="dropdown-overlay" v-if="showOverlay" @click="closeAllDropdowns"></view>
		
		<view class="dropdown-content area-dropdown" v-show="dropdownVisible.area">
			<!-- 两列布局的区域选项 -->
			<view class="area-grid">
				<view class="area-item" 
				      v-for="item in areaList" 
				      :key="item.id" 
				      :class="{ 'active': tempSelectedArea === (item.name === '全部' ? '' : item.name) }"
				      @click="tempSelectArea(item)">{{ item.name }}</view>
			</view>
			
			<!-- 底部按钮 -->
			<view class="area-actions">
				<view class="area-btn cancel-btn" @click="cancelAreaSelection">取消</view>
				<view class="area-btn confirm-btn" @click="confirmAreaSelection">确定</view>
			</view>
		</view>
		
		<view class="dropdown-content" v-show="dropdownVisible.type">
			<view class="dropdown-item" v-for="item in typeList" :key="item" @click="selectType(item)">{{ item }}</view>
		</view>
		
		<view class="dropdown-content" v-show="dropdownVisible.price">
			<view class="dropdown-item" v-for="item in priceList" :key="item" @click="selectPrice(item)">{{ item }}</view>
		</view>
		
		<view class="dropdown-content filter-dropdown" v-show="dropdownVisible.filter">
			<!-- 标题 -->
			<view class="filter-header">更多选项</view>
			<!-- 户型 -->
			<view class="filter-section">
				<view class="filter-title">户型</view>
				<view class="filter-options">
					<view class="filter-option" v-for="item in roomTypes" :key="item" 
					      :class="{ 'active': selectedRoomTypes.includes(item) }"
					      @click="toggleRoomType(item)">{{ item }}</view>
				</view>
			</view>
			
			<!-- 楼层 -->
			<view class="filter-section">
				<view class="filter-title">楼层</view>
				<view class="filter-options">
					<view class="filter-option" v-for="item in floorTypes" :key="item" 
					      :class="{ 'active': selectedFloorTypes.includes(item) }"
					      @click="toggleFloorType(item)">{{ item }}</view>
				</view>
			</view>
			
			<!-- 朝向 -->
			<view class="filter-section">
				<view class="filter-title">朝向</view>
				<view class="filter-options">
					<view class="filter-option" v-for="item in orientations" :key="item" 
					      :class="{ 'active': selectedOrientations.includes(item) }"
					      @click="toggleOrientation(item)">{{ item }}</view>
				</view>
			</view>
			
			<!-- 特色 -->
			<view class="filter-section">
				<view class="filter-title">特色</view>
				<view class="filter-options">
					<view class="filter-option" v-for="item in features" :key="item" 
					      :class="{ 'active': selectedFeatures.includes(item) }"
					      @click="toggleFeature(item)">{{ item }}</view>
				</view>
			</view>
			
			<!-- 底部操作按钮 -->
			<view class="filter-actions">
				<view class="filter-btn reset-btn" @click="resetFilters">清除</view>
				<view class="filter-btn confirm-btn" @click="confirmFilters">确定</view>
			</view>
		</view>
		
		<!-- 房源列表 -->
		<view class="house-list">
			<!-- 房源项示例 -->
			<div class="box">
				<div class="img">
					<image src="/static/2.png" mode="aspectFill" style="width: 100%; height: 100%;"></image>
				</div>
				<div class="text">
					<p style="font-weight: bolder;">栖庭3室2厅7000元</p>
					<p style="color: #ccc;font-size: 12px;">三室/91/南|北/栖庭</p>
					<view class="tags">
						<view class="tag tag-subway">近地铁</view>
						<view class="tag tag-new">新上</view>
					</view>
					<p style="font-weight: bolder; color: red;">7000元/月</p>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 下拉菜单显示状态
				dropdownVisible: {
					area: false,
					type: false,
					price: false,
					filter: false
				},
				showOverlay: false,
				
				// 选中的值
			selectedArea: '',
			selectedType: '',
			selectedPrice: '',
			// 临时选中的区域（用于确定/取消操作）
			tempSelectedArea: '',
				
				// 筛选条件
				selectedRoomTypes: [],
				selectedAreaSizes: [],
				selectedFeatures: [],
				selectedFloorTypes: [],
				selectedOrientations: [],
				
				// 数据列表
			areaList: [
				{ id: 1, name: '全部' },
				{ id: 2, name: '鼓楼区' },
				{ id: 3, name: '玄武区' },
				{ id: 4, name: '建邺区' },
				{ id: 5, name: '秦淮区' },
				{ id: 6, name: '雨花台区' },
				{ id: 7, name: '栖霞区' },
				{ id: 8, name: '江宁区' },
				{ id: 9, name: '浦口区' },
				{ id: 10, name: '不限' },
				{ id: 11, name: '许府巷' },
				{ id: 12, name: '水佐岗' },
				{ id: 13, name: '汉中门大街' },
				{ id: 14, name: '宁海路' },
				{ id: 15, name: '金陵小区' },
				{ id: 16, name: '龙江' },
				{ id: 17, name: '凤凰西街' },
				{ id: 18, name: '地铁' }
			],
				typeList: ['全部', '整租', '合租', '公寓'],
				priceList: ['全部', '1000以下', '1000-2000', '2000-3000', '3000-4000', '4000-5000', '5000以上'],
				roomTypes: ['一室', '二室', '三室', '四室', '四室+'],
				areaSizes: ['50㎡以下', '50-70㎡', '70-90㎡', '90-110㎡', '110-130㎡', '130㎡以上'],
				features: ['集中供暖', '双卫生间', '近地铁', '随时看房', '精装', '公寓', '独立卫生间', '押一付一', '独立阳台'],
				floorTypes: ['高楼层', '中楼层', '低楼层'],
				orientations: ['东', '西', '南', '北', '东南', '东北', '西南', '西北']
			}
		},
		computed: {
			// 计算属性，用于判断是否显示遮罩层
			showOverlay() {
				return this.dropdownVisible.area || this.dropdownVisible.type || 
				       this.dropdownVisible.price || this.dropdownVisible.filter;
			}
		},
		methods: {
				// 切换下拉菜单
			toggleDropdown(type) {
				// 先关闭所有下拉菜单
				this.closeAllDropdowns();
				// 再打开当前点击的下拉菜单
				this.dropdownVisible[type] = true;
				// 如果是区域下拉，初始化临时选中值
				if (type === 'area') {
					this.tempSelectedArea = this.selectedArea;
				}
			},
			
			// 关闭所有下拉菜单
			closeAllDropdowns() {
				for (let key in this.dropdownVisible) {
					this.dropdownVisible[key] = false;
				}
			},
			
			// 临时选择区域（点击区域项时）
			tempSelectArea(item) {
				this.tempSelectedArea = item.name === '全部' ? '' : item.name;
			},
			
			// 确认区域选择
			confirmAreaSelection() {
				this.selectedArea = this.tempSelectedArea;
				this.dropdownVisible.area = false;
			},
			
			// 取消区域选择
			cancelAreaSelection() {
				this.dropdownVisible.area = false;
				// 重置临时选择
				this.tempSelectedArea = this.selectedArea;
			},
			
			// 选择方式
			selectType(item) {
				this.selectedType = item === '全部' ? '' : item;
				this.dropdownVisible.type = false;
			},
			
			// 选择价格
			selectPrice(item) {
				this.selectedPrice = item === '全部' ? '' : item;
				this.dropdownVisible.price = false;
			},
			
			// 切换户型选择
			toggleRoomType(item) {
				const index = this.selectedRoomTypes.indexOf(item);
				if (index > -1) {
					this.selectedRoomTypes.splice(index, 1);
				} else {
					this.selectedRoomTypes.push(item);
				}
			},
			
			// 切换面积选择
			toggleAreaSize(item) {
				const index = this.selectedAreaSizes.indexOf(item);
				if (index > -1) {
					this.selectedAreaSizes.splice(index, 1);
				} else {
					this.selectedAreaSizes.push(item);
				}
			},
			
			// 切换楼层选择
			toggleFloorType(item) {
				const index = this.selectedFloorTypes.indexOf(item);
				if (index > -1) {
					this.selectedFloorTypes.splice(index, 1);
				} else {
					this.selectedFloorTypes.push(item);
				}
			},
			
			// 切换朝向选择
			toggleOrientation(item) {
				const index = this.selectedOrientations.indexOf(item);
				if (index > -1) {
					this.selectedOrientations.splice(index, 1);
				} else {
					this.selectedOrientations.push(item);
				}
			},
			
			// 切换特色选择
			toggleFeature(item) {
				const index = this.selectedFeatures.indexOf(item);
				if (index > -1) {
					this.selectedFeatures.splice(index, 1);
				} else {
					this.selectedFeatures.push(item);
				}
			},
			
			// 重置筛选条件
			resetFilters() {
				this.selectedRoomTypes = [];
				this.selectedAreaSizes = [];
				this.selectedFeatures = [];
				this.selectedFloorTypes = [];
				this.selectedOrientations = [];
			},
			
			// 确认筛选条件
			confirmFilters() {
				this.dropdownVisible.filter = false;
				// 这里可以添加筛选后的逻辑，比如重新加载数据
				console.log('筛选条件确认:', {
					roomTypes: this.selectedRoomTypes,
					areaSizes: this.selectedAreaSizes,
					features: this.selectedFeatures,
					floorTypes: this.selectedFloorTypes,
					orientations: this.selectedOrientations
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	/* 搜索栏样式 */
	.search-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		padding: 10px 15px;
		background-color: #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		z-index: 1000;
	}
	
	.search-input {
		flex: 1;
		height: 36px;
		padding: 0 15px;
		background-color: #f0f0f0;
		border-radius: 18px;
		font-size: 14px;
		color: #333;
	}
	
	.user-icon {
		margin-left: 15px;
		font-size: 20px;
	}
	
	/* 筛选栏样式 */
	.filter-bar {
		position: fixed;
		top: 56px;
		left: 0;
		right: 0;
		display: flex;
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		z-index: 999;
	}
	
	.filter-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 44px;
		position: relative;
		font-size: 14px;
		color: #333;
	}
	
	.filter-item::after {
		content: '';
		position: absolute;
		right: 0;
		top: 12px;
		bottom: 12px;
		width: 1px;
		background-color: #eee;
	}
	
	.filter-item:last-child::after {
		display: none;
	}
	
	.arrow {
		margin-left: 5px;
		font-size: 12px;
		transition: transform 0.3s;
	}
	
	.arrow.rotate {
		transform: rotate(180deg);
	}
	
	/* 下拉内容样式 */
	.dropdown-overlay {
		position: fixed;
		top: 100px;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 998;
	}
	
	.dropdown-content {
		position: fixed;
		top: 100px;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 999;
		max-height: 60vh;
		overflow-y: auto;
	}
	
	/* 普通下拉项样式 */
	.dropdown-item {
		padding: 15px;
		font-size: 14px;
		color: #333;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.dropdown-item:active {
		background-color: #f5f5f5;
	}
	
	/* 区域下拉菜单样式 */
	.area-dropdown {
		display: flex;
		flex-direction: column;
		max-height: 70vh;
	}
	
	.area-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
		flex: 1;
		overflow-y: auto;
		padding: 0;
	}
	
	.area-item {
		padding: 15px 10px;
		font-size: 14px;
		color: #333;
		text-align: center;
		position: relative;
	}
	
	.area-item.active {
		color: #1890ff;
	}
	
	.area-item.active::after {
		content: '✓';
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 12px;
		color: #1890ff;
	}
	
	.area-actions {
		display: flex;
		padding: 15px;
		gap: 10px;
		border-top: 1px solid #f0f0f0;
	}
	
	.area-btn {
		flex: 1;
		text-align: center;
		padding: 10px;
		border-radius: 4px;
		font-size: 14px;
	}
	
	.cancel-btn {
		background-color: #f5f5f5;
		color: #666;
	}
	
	.confirm-btn {
		background-color: #1890ff;
		color: #fff;
	}
	
	/* 筛选面板样式 */
	.filter-dropdown {
		max-height: 70vh;
		overflow-y: auto;
	}
	
	.filter-header {
		text-align: center;
		font-size: 16px;
		font-weight: 600;
		color: #333;
		padding: 15px 0;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.filter-section {
		padding: 15px 0;
		border-bottom: 1px solid #f0f0f0;
	}
	
	.filter-title {
		font-size: 14px;
		font-weight: 600;
		color: #333;
		padding: 0 15px 12px;
	}
	
	.filter-options {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
	}
	
	.filter-option {
	 padding: 12px 0;
	 text-align: center;
	 font-size: 14px;
	 color: #333;
	 border-right: 1px solid #f0f0f0;
	 border-bottom: 1px solid #f0f0f0;
	}
	
	.filter-option:nth-child(3n) {
	 border-right: none;
	}
	
	.filter-option.active {
	 color: #1890ff;
	}
	
	.filter-actions {
	 display: flex;
	 padding: 15px;
	 gap: 10px;
	}
	
	.filter-btn {
	 flex: 1;
	 text-align: center;
	 padding: 12px;
	 border-radius: 4px;
	 font-size: 14px;
	 font-weight: 500;
	}
	
	.reset-btn {
	 background-color: #fff;
	 color: #666;
	 border: 1px solid #ddd;
	}
	
	.confirm-btn {
	 background-color: #1890ff;
	 color: #fff;
	 border: none;
	}
	
	/* 房源列表样式 */
	.house-list {
		padding-top: 50px;
		padding-bottom: 10px;
	}
	
	.box {
		width: 100%;
		height: 120px;
		display: flex;
		background-color: #fff;
		margin-bottom: 10px;
		padding: 10px;
		box-sizing: border-box;
	}
	
	.img {
		width: 35%;
		height: 100%;
		border-radius: 4px;
		overflow: hidden;
	}
	
	.text {
		width: 65%;
		height: 100%;
		padding-left: 15px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.tags {
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
	}
	
	.tag {
		padding: 2px 8px;
		border-radius: 3px;
		font-size: 11px;
	}
	
	.tag-subway {
		background-color: #e6f7ff;
		color: #1890ff;
	}
	
	.tag-new {
		background-color: #fff1f0;
		color: #ff4d4f;
	}
	
	/* 响应式调整 */
	@media screen and (min-width: 768px) {
		.house-list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 10px;
			padding: 100px 10px 10px;
		}
		
		.box {
			margin-bottom: 0;
		}
	}
</style>